<!-- <template>
    <div class="guanzhu">
       <h3>底部的关注</h3>
    </div>
</template> -->

<!-- <script>
    export default {
        name:"Guanzhu"
    }
</script>

<style lang="less" scoped>

</style> -->
<template>
  <div class="guanzhu">
    <!-- <h3> 榜单</h3> -->
    <FooterMusicVue></FooterMusicVue>
    <div class="my-tab">
      <div class="tabcitem">
        <div class="my-hohot">
          <div class="istop">
            <div class="mainimg">
              <div class="mu-usprt"></div>
              <div class="hottime">"更新日期:" "02月23日"</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hopcontent" v-for="(item, i) in singerSongData" :key="i">
      <div class="singlist" @click="updateIndex(item)">
      <!-- <div class="singlist" @click="ViewSingerSong(item.song.artists.id)"> -->
        <!-- <a class="m-sgitem" href="//music.163.com/m/song?id=1997438791"> -->
          <div class="m-sgitem"> 
          <div class="sgfl sgfl-cred">{{ i + 1 }}</div>
          <div class="sgfr f-bd f-bd-btm">
            <div class="sgchfl">
              <div class="f-thide sgtl">{{ item.name }}</div>
              <div class="f-thide sginfo*" v-for="(itemone, index) in item.artists" :key="index">
                <i class="u-hmsprt sghot"> </i>
              {{ itemone.name }}
              </div>
            </div>
            <div class="sgchfr">
              <span class="u-hmsprt sgchply"> </span>
            </div>
          </div>
        <!-- </a> -->
      </div>
      </div>
    </div>
    <hr class="ishr" />
    <!-- <div class="guanzhu" v-if="Object.keys(baseInfo).length"> -->
    <!-- <div class="left">
        <img v-lazy="cover" alt />
      </div> -->
    <!-- <div class="right">
        <h3>
          <b-tag color="var(--main-color)" plain>专辑</b-tag>
          {{ baseInfo.name }}
        </h3>
        <div class="right-item">
          <b-button
            background="var(--main-color)"
            color="#fff"
            :style="{ border: `none` }"
            round
            class="button"
            @click="handlePlayMusic"
          >
            <i class="iconfont icon-bofang" />播放全部
          </b-button>
          <b-button round class="button">
            <i class="iconfont icon-shoucang" />
            收藏({{ albumDetail.subCount }})
          </b-button>
          <b-button round class="button">
            <i class="iconfont icon-fenxiang" />
            分享({{ albumDetail.shareCount }})
          </b-button>
        </div>
        <div class="right-item">
          <span>歌手：{{ baseInfo.artist.name }}</span>
        </div>
        <div class="right-item">
          <span>时间：{{ getCreateDate }}</span>
        </div>
      </div> -->
  </div>
</template>

<script>
import { formatDate } from "../utils/tool";
import FooterMusicVue from "../components/item/FooterMusic.vue";
// import SongboplayVue from "../components/item/FooterMusic.vue";

//引用才能解构
import { mapMutations } from "vuex";

import { mapState } from "vuex";

export default {
  name: "Guanzhu",
  components: {
    FooterMusicVue,
  },
  data() {
    return {
      //引入搜索关键
      keyWordList: [],
      singerSongData: [],
      singlist: [],
    };
  },
  created() {
    //截取传过来歌手的id
    //获取歌手的id
    let singerId = this.$route.params.id;
    this.gwtSongBySing();
  },

  mounted() {
    this.keyWordList = JSON.parse(localStorage.getItem("keyWordList"))
      ? JSON.parse(localStorage.getItem("keyWordList"))
      : [];
  },
  methods: {
    ...mapMutations([
      "backplay",
      "play",
      "duration",
      "updateDuration",
      "gettheLyricone",
      "updateCurrentTime",
      "updateIsbtnShow",
      "updateDetailShow",
      
      "setIsMain"
    ]),

    back: function () {
      // this.$refs.audio.paused
      // console.log("输出的$refs" ,$refs);
      let isback = true;
      if (isback) {
        this.$children[0].backplay();
      } else {
      }
      this.$router.back();
    },


    ViewSingerSong(id){
       this.setIsMain(false);
       this.$router.push({name:"Danqu",params:{id}});
    },

    updateIndex: function (item) {
      console.log("isitem===>", item);

      item.al = item;
      item.al.picUrl = item.picUrl;
      item.al.name = item.name;
      // item.al.picUrl = item.singlis.picUrl;
      // item.al.name = item.name;

      //进行提交使用pushPlayList函数 vuex里面
      this.$store.commit("pushPlayList", item);
      //播放push到最后的一首歌 vux里
      this.$store.commit(
        "updatePlayListIndex",
        this.$store.state.playList.length - 1
      );
    },

    //获取热门歌曲榜歌曲
    gwtSongBySing(){
      this.axios({
        method:"get",
        url:"/personalized/newsong",
        params:{
          limit:20
        }
      }).then((res) => {
        console.log("歌曲的热歌榜",res.data.result);
        this.singerSongData = res.data.result


      }).catch((err)=> {
        console.log(err);
      })
    }

  },
};
</script>

<style lang="less" scoped>
.guanzhu {
  .my-tab {
    color: #333;
    outline: 0;
    width: 100%;
    height: 100%;
    display: block;
    .tabcitem {
      width: 100%;
      height: 100%;

      .my-hohot {
        padding: 0;
        margin: 0;
        .istop {
          position: relative;
          padding-top: 38.9%;
          overflow: hidden;
          background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=)
            no-repeat;
          background-size: contain;
          .mainimg {
            display: flex;
            flex-direction: column;

            justify-content: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 2;
            padding-left: 20px;
            box-sizing: border-box;
            .mu-usprt {
              width: 142px;
              height: 67px;
              background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                no-repeat;
              background-size: 166px 97px;
              background-position: -24px -30px;
            }
          }
        }
        .istop::after {
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
    }
  }
  .hopcontent {
    position: relative;
    width: 100%;
    height: 100%;
    color: #333;
    .singlist {
      position: relative;
      .m-sgitem {
        display: flex;
        padding-left: 10px;
        text-decoration: none;
        cursor: pointer;
        margin: 0 auto;
        .sgfl-cred {
          display: flex;
          color: #999999;
          align-items: center;
          justify-content: center;
          width: 40px;
          font-size: 17px;
          margin-left: -10px;
        }
        .f-bd-btm {
          flex: 1 1 auto;
          -webkit-box-flex: 1;
          display: flex;
          position: relative;
          &::after {
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            border-bottom-width: 1px;
            position: absolute;
            z-index: 2;
            content: "";
            top: 0;
            left: 0;
            pointer-events: none;
            box-sizing: border-box;
            transform-origin: top left;
          }
          .sgchfl {
            width: 0;
            padding: 6px 0;
            flex: 1 1 auto;
            .sgtl {
              font-size: 17px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal;
            }
            .sginfo {
              font-size: 12px;
              color: #888;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
              .sghot {
                display: inline-block;
                width: 12px;
                height: 8px;
                margin-right: 4px;
                background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                  no-repeat;
                background-size: 166px 97px;
                font-style: normal;
              }
            }
          }
          .sgchfr {
            display: flex;
            align-items: center;
            padding: 0 10px;
            .sgchply {
              display: inline-block;
              width: 22px;
              height: 22px;
              background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=)
                no-repeat;
              background-size: 166px 97px;
              background-position: -24px 0;
            }
          }
        }
      }
    }
  }
}
</style>
<!-- <style lang="less" scoped>

    .button {
    width: 100%;
    padding: 10px 0px;
    display: flex;
    position: relative;
    .left {
      width: 200px;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      padding-left: 35px;
      h3 {
        padding: 5px 0px;
      }
      &-item {
        padding: 5px 0px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .creator-name {
          margin: 0px 10px;
        }
        .iconfont {
          margin-right: 8px;
        }
        .button {
          margin-right: 15px;
        }
      }
    }
  }
  .desc {
    padding: 10px 0px;
    font-size: 13px;
    span {
      color: var(--tag-color);
    }
    &-title {
      padding-top: 5px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
  .play {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 13px;
    &-left {
      padding: 5px;
      border-right: 1px solid var(--border);
    }
    &-right {
      padding: 5px;
    }
  }
  </style> -->
